<template>
    <div>
        <!--消息弹窗-->
        <div class="dialog-box bg-fff" id="dialog_show" ref="dialog-box" v-show="dialogBoxShow">
            <div class="dialog-main">
                <div class="dialog-message px-30 pt-15">
                    <li class="pt-30 text-center f36 color-000">最新消息</li>
                    <ul v-for="(item,index) in msgList">
                        <a @click="deleteMsg(1)">
                            <li class="py-30 fw">
                                <div class="fw">
                                    <div class="tile f30 color-000 fl" style="width:85%;">
                                        <i class="fontarial">{{msgHeadList[index]}}{{msgBodyList[index]}} {{item.opContent2}}</i>，
                                        <span class="buyer-status6" v-if="item.opContent4&&item.flowState == 10">
                                            已付款
                                             </span>
                                      <span class="buyer-status6" v-else-if="item.opContent4&&item.flowState == 0">
                                            {{item.opContent4.split("/")[0].replace('，请通过“我”来查看订单详情', '')}} 。
                                             </span>
                                        <span class="buyer-status6" v-else-if="item.opContent4&&item.opContent4.indexOf('/') > 0&&item.opContent4.split('/')[1]&&(item.flowState == 1 && item.msgType == 1) || item.flowState == 32">
                                          {{item.opContent4.split("/")[0]}}
                                        </span>
                                        <span class="buyer-status6" v-else-if="item.opContent4&&item.opContent4.indexOf('/') > 0&&item.opContent4.split('/')[1]">
                                          {{item.opContent4.split("/")[1]}}
                                      </span>
                                        <span class="buyer-status6" v-else-if="item.opContent4">
                                          {{item.opContent4.split("/")[0]}}
                                      </span>
                                        <span class="buyer-status6" v-if="!item.opContent4&&item.otherData">
                                        {{JSON.parse(item.otherData).opContent5}}
                                    </span>
                                    </div>
                                    <span class="fr fwright"></span>
                                </div>
                                <div class="see f24 color-999 fw"><span class="fr fontarial" >{{fTime(item.messageTime)}}</span>{{orderMsg}}
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="dialog-foot">
                    <a class="dialog_close border-right f36" @click='deleteMsg'>关闭</a>
                    <a class="dialog_close f36" @click="deleteMsg(1)">我的消息中心</a>
                </div>
            </div>
        </div>
        <div class="dialog_cover" v-show="dialogBoxShow" @touchmove.prevent></div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogBoxShow: false,
        msgList: [],
        msgHeadList: [],
        msgBodyList: [],
        msgTime: '',
        moreMsgList: [],
        orderMsg:'订单消息'
      }
    },
    mounted() {
      this.getMsgList();
    },
    methods: {
      getMsgList: function () {
        let self = this;
        self.$http.get(self.$CONSTANTS.P30006 + 'message/selectmessageindexlist', {
          headers: {
            "Cache-Control": "no-cache"
          },
          params: {
            page: 1,
            pageSize: 3
          }
        }).then
        (function (res) {
          if (res.data && res.data.responseStatus.code == "00") {
            //                        console.log(res.data)
            if (res.data.totalCount > 0) {
              self.msgList = res.data.messageList;
              for (var i = self.msgList.length - 1; i >= 0; i--) {
                if (self.msgList[i].isSeller == true) {
                  if (self.msgList[i].msgType == 11 || self.msgList[i].msgType == 12 || self.msgList[i].msgType == 14) {
                    var msgTitle;
                    if (self.msgList[i].msgType == 11) {
                      msgTitle = '投诉'
                    } else if (self.msgList[i].msgType == 12) {
                      msgTitle = '建议'
                    } else if (self.msgList[i].msgType == 14) {
                      msgTitle = '咨询'
                    }
                    self.msgHeadList.unshift(`您的${msgTitle}`);
                  } else {
                    self.msgHeadList.unshift("您发布的");
                  }
                } else {
                  if (self.msgList[i].msgType == 11 || self.msgList[i].msgType == 12 || self.msgList[i].msgType == 14) {
                    var msgTitle;
                    if (self.msgList[i].msgType == 11) {
                      msgTitle = '投诉'
                    } else if (self.msgList[i].msgType == 12) {
                      msgTitle = '建议'
                    } else if (self.msgList[i].msgType == 14) {
                      msgTitle = '咨询'
                    }
                    self.msgHeadList.unshift(`您的${msgTitle}`);
                  } else {
                    self.msgHeadList.unshift("您购买的");
                  }
                }
                ;
                if (self.msgList[i].msgType == 1) {
                  self.msgBodyList.unshift("商品")
                } else if (self.msgList[i].msgType == 2) {
                  self.msgBodyList.unshift("订单")
                }
                if (self.msgList[i].flowState == 10) {
                  if (self.msgList[i].msgType == 11 || self.msgList[i].msgType == 12 || self.msgList[i].msgType == 14) {
                    self.moreMsgList.unshift("客服已回复，请您点击消息查看")
                    self.orderMsg='回复时间'
                  }else{
                    self.moreMsgList.unshift("正在交易中")
                  }
                } else {
                  self.moreMsgList.unshift(self.msgList[i].msg)
                }
                //                                this.msgHeadList.push(this.msgList.isSeller);
                //                                this.msgBodyList.push(this.msgList.msgType);
              }
              self.dialogBoxShow = true;
            } else {
              self.dialogBoxShow = false;
            }

          } else {
            // alert();
            self.dialogBoxShow = false;
          }
        });
      },
      fTime: function (e) {
        var date = new Date(parseInt(e))
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        var hours = date.getHours()
        var min = date.getMinutes()
        var time = year + "年" + month + "月" + day + "日" + hours + "时" + min + "分";
        return time
      },
      async deleteMsg(n) {
        let self = this;
        await self.delmsg()
        self.dialogBoxShow = false;
        if (n === 1) {
          location.href = '/vue/message'
        }

      },
      delmsg() {
//        return new Promise((resolve, reject) => {
//            this.$http.get(this.$CONSTANTS.APIGoods + 'message/deletemessageindexlist', {}).then(
//                res => {
//                    if (res.body.success) {
//                        resolve()
//                    } else {
//                        resolve()
//                    }
//                },
//                err => {
//                    reject()
//                    console.log(err);
//                }
//            )
//        })
      },
    }

  }
</script>
<style scoped>
    .dialog_cover {
        position: fixed;
        _position: absolute;
        left: 0;
        top: 0;
        display: block;
        z-index: 555;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=70);
        opacity: 0.7;
        background: #000;
    }

    #dialog_show {
        left: 50%;
        margin-left: -3.6rem;
        opacity: 1;
        top: 3rem;
        /*transform: translate3d(-50%, 0, 0);*/
        position: fixed;
        width: 7.2rem;
        z-index: 1001;
        display: block;
    }

    .see {
        height: 0.48rem;
        line-height: 0.68rem;
    }

    .dialog-message {
        height: auto;
        display: block;
        overflow: hidden;
    }

    .fwright {
        display: block;
        background: url(~images/kefu/right.png) right center no-repeat;
        height: .5rem;
        width: .13rem;
        background-size: .13rem;
    }

    .fw > .tile {
        width: 95% !important;
    }

</style>
